<!--
 * @Description:无限滚动list
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-14 08:53:13
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-08 09:41:07
-->
<template>
    <div>
        <ul v-infinite-scroll="load" class="infinite-list" infinite-scroll-disabled="disabled" style="overflow: auto">
            <li class="infinite_list_header">
                <div>
                    {{ listHeaderData.index }}
                </div>
                <div>
                    {{ listHeaderData.name }}
                </div>
                <div>{{ listHeaderData.date }}</div>
            </li>
            <li v-for="(i, index) in data" :key="index + i" class="infinite-list-item">
                <div>{{ index + 1 }}</div>
                <div class="ellipsis" style="text-align: left;">
                    <a href="javascript:void(0);" @click="Jump(i)">{{ i[Type.title] }}</a>
                </div>
                <div>{{ i[Type.date] }}</div>
            </li>
            <li v-if="loading">
                <p>加载中...</p>
            </li>
            <li v-if="noMore">
                <p>没有更多了</p>
            </li>
        </ul>
    </div>
</template>

<script>


export default {
    components: {},
    props: {
        listData: Array,
        listHeaderData: Object,
        url: {
            type: String,
            default: "",
        },
        NavName: Object,
        Type: Object,
        api: String,
        Category: String
    },
    watch: {
        NavName: {

            handler: function (val, oldVal) {
                this.getData()

            },
            immediate: true,
            deep: true

        },
        handMenu(val) {
            // this.getData()
        }
    },
    data() {
        return {
            data: [],
            loading: false,
            pageSize: 10,
            pageSizeGao: 10,
            total: "",
        }
    },
    computed: {
        noMore() {

            return this.data.length >= this.total
        },
        disabled() {
            return this.loading || this.noMore
        },
    },
    mounted() {
        // this.getData()
    },
    methods: {
        async getData() {

            if (this.url == "gongshi") {
                let Archivedata = {
                    pageSize: this.pageSizeGao,
                    pageIndex: 1,

                }

                const { data, count } = await this.$store.dispatch("ArchiveInfo/" + this.api, Archivedata)
                this.total = count
                this.data = data
                this.loading = false
                this.$emit("getTotal", { url: this.api, total: count })
            } else {
                let Archivedata = {
                    pageSize: this.pageSize,
                    pageIndex: 1,
                    Category: "",
                    Area: []
                }
                if (this.NavName.province) Archivedata.Area.push(this.NavName.province)
                if (this.NavName.city) Archivedata.Area.push(this.NavName.city)
                if (this.NavName.area) Archivedata.Area.push(this.NavName.area)

                const { data, count } = await this.$store.dispatch("ArchiveInfo/" + this.api, Archivedata)
                this.total = count
                this.data = data
                this.loading = false
                this.$emit("getTotal", { url: this.api, total: count })
            }
        },
        async load() {
            this.loading = true
            this.pageSize = this.pageSize + 3
            let Archivedata = {
                pageSize: this.pageSize,
                pageIndex: 1,
                Category: "",
                Area: [this.NavName.province, this.NavName.city, this.NavName.area],
            }
            const { data } = await this.$store.dispatch("ArchiveInfo/" + this.api, Archivedata)

            const chaCount = data.filter(itemF => !this.data.some(ele => ele.id === itemF.id))
            this.data.push(...chaCount)
            this.loading = false

        },
        Jump(data) {
            if (this.url == "/InfoPublic/details") {
                sessionStorage.setItem("infoPublic", JSON.stringify(data))
            } else {
                this.$store.commit("table/SET_ROWDATA", data)

            }
            this.$router.push({ path: this.url })
        },

    },
}
</script>

<style scoped lang="scss">
.infinite-list {
    // width: 100%;
    height: 100%;
    margin: 0 50px;

    border-radius: 10px;
    border: 1px solid #e7f1f0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    &::-webkit-scrollbar {
        display: none;
    }

    li {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        line-height: 50px;
        // height: 0.74rem;
        align-items: center;
        border-bottom: 1px solid #e7f1f0;

        div {
            text-align: center;
        }

        div:nth-child(1) {
            width: 80px;
            padding: 0 10px;
            color: #666;
        }

        div:nth-child(2) {
            width: calc(100% - 200px);
            color: #08c;
        }

        div:nth-child(3) {
            width: 150px;
            color: #666;
            padding: 0 10px;
        }
    }

    .infinite-list-item {
        li div {}

        &:hover {
            color: #0b5d9b;
            background-color: #dce5eb;
        }
    }

    .infinite_list_header {
        color: #0b5d9b;
        font-weight: 600;

        div:nth-child(1) {
            color: #0b5d9b;
        }

        div:nth-child(3) {
            color: #0b5d9b;
        }
    }

    p {
        text-align: center;
        padding: 10px 0;
    }

    // .infinite-list-item:nth-child(odd) {
    //     background-color: #f2f2f2;
    // }
}
</style>
